// 引入项目设计系统变量
@import "../../../app.less";

// 页面容器
.rule-container {
  padding: @spacing-lg;
  background-color: @bg-primary;
  box-sizing: border-box;
}

.rule-container.android {
    height: calc(100vh - @header-bar-height-android);
}

.rule-container.ios {
    height: calc(100vh - @header-bar-height-ios);
}

// 顶部说明卡片
.intro-card {
  display: flex;
  align-items: center;
  padding: @spacing-lg;
  background: linear-gradient(135deg, @primary-light 0%, #ffffff 100%);
  border-radius: @border-radius-lg;
  margin-bottom: @spacing-lg;
  box-shadow: @shadow-sm;
  transition: transform @transition-normal, box-shadow @transition-normal;

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }

  .intro-icon {
    width: 100rpx;
    height: 100rpx;
    margin-right: @spacing-lg;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 16rpx rgba(7, 193, 96, 0.15);

    image {
      width: 60rpx;
      height: 60rpx;
    }
  }

  .intro-content {
    flex: 1;

    .intro-title {
      font-size: @font-size-lg;
      font-weight: bold;
      color: @text-primary;
      display: block;
      margin-bottom: @spacing-sm;
    }

    .intro-desc {
      font-size: @font-size-base;
      color: @text-secondary;
      line-height: 1.5;
    }
  }
}

// 分组标题
.group-container {
  background-color: @card-bg;
  border-radius: @border-radius-lg;
  overflow: hidden;
  margin-bottom: @spacing-lg;
  box-shadow: @card-shadow;
  transition: box-shadow @transition-normal;

  &:active {
    box-shadow: @hover-shadow;
  }
}

.group-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: @spacing-md @spacing-lg;
  font-weight: bold;
  background-color: @bg-tertiary;
  border-bottom: 1rpx solid @border-light;
  position: relative;

  // 装饰性元素
  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 6rpx;
    height: 100%;
    background-color: @primary-color;
  }

  .range-text {
    font-size: @font-size-lg;
    font-weight: bold;
    color: @text-primary;
    margin-left: @spacing-md;
  }

  .count-text {
    font-size: @font-size-sm;
    color: @text-tertiary;
    background-color: rgba(7, 193, 96, 0.1);
    padding: 4rpx @spacing-sm;
    border-radius: 20rpx;
  }
}

// 规则列表
.rule-list {
  padding: @spacing-md @spacing-lg;
}

.rule-item {
  padding: @spacing-lg 0;
  position: relative;

  // 使用虚线分隔符替代实线
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1rpx;
    background-image: linear-gradient(to right, @border-light 50%, transparent 50%);
    background-size: 16rpx 1rpx;
    background-repeat: repeat-x;
  }

  &:last-child::after {
    display: none;
  }

  .behavior-desc {
    font-size: @font-size-base-md;
    color: @text-primary;
    line-height: 1.5;
    margin-bottom: @spacing-md;
    padding-left: @spacing-lg;
    position: relative;

    // 添加小图标
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 12rpx;
      height: 12rpx;
      border-radius: 50%;
      background-color: @primary-color;
    }
  }

  .aux-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: @spacing-lg;

    // 基础积分样式
    .points {
      font-size: @font-size-base;
      font-weight: 500;
      padding: 4rpx @spacing-sm;
      border-radius: 16rpx;
      min-width: 120rpx;
      text-align: center;
    }

    // 正积分样式
    .points.positive {
      background-color: rgba(7, 193, 96, 0.15);
      color: @success-color;
      border: 1rpx solid rgba(7, 193, 96, 0.2);
    }

    // 负积分样式
    .points.negative {
      background-color: rgba(245, 63, 63, 0.15);
      color: @error-color;
      border: 1rpx solid rgba(245, 63, 63, 0.2);
    }

    .limit-desc {
      font-size: @font-size-sm;
      color: @text-tertiary;
      text-align: right;
      line-height: 1.3;
      max-width: 50%;
    }
  }
}

.footer {
  padding-bottom: @spacing-xxl;
}
